<template>
	<view class="">
		<!-- 顶部个人信息 -->
		<view class="bg-white">
			<view class="flex padding">
				<view class="padding-lr-xs">
					<view class="cu-avatar lg round" @click="editUser">
						<image :src="userinfo.img" alt=""></image>
					</view>
				</view>
				<view class="padding-xs text-xl text-black">
					<view>{{userinfo.username}}</view>
					<view class="cu-tag round line-green sm">账户余额:{{userinfo.balance}}</view>
				</view>
			</view>
		</view>
		<!-- 基本数据 -->
		<view class="cu-list grid col-4 no-border padding-lr-xs radius-lg-bottom">
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					6
				</view>
				<text>优惠券</text>
			</view>
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					0
				</view>
				<text>权益卡</text>
			</view>
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					4
				</view>
				<text>保修卡</text>
			</view>
			<view class="cu-item">
				<view class="text-black text-bold text-xxl">
					11
				</view>
				<text>收据</text>
			</view>
		</view>
		<!-- 助力/推荐/邀请 -->
		<view class="margin-top-sm padding-lr-xs">
			<view class="bg-brown light radius-lg shadow-blur">
				<view class="flex padding-tb-sm padding-lr-sm justify-between">
					<view class="padding-xs">
						<view>9.9元开通超级会员最高可省￥40</view>
					</view>
					<view class="">
						<view class="cu-btn round bg-black">开通会员</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 常用功能 -->
		<view class="cu-bar margin-lr-xs margin-top-sm grid col-4 no-border bg-white radius-lg-top">
			<view class="action">
				<text class="text-xl text-black">我的订单</text>
			</view>
			<view class="action">
				<text class="text-lg">全部订单<text class="cuIcon-right"></text></text>
			</view>
		</view>
		<view class="cu-list grid col-4 no-border text-black margin-lr-xs padding-bottom radius-lg-bottom">
			<view class="cu-item" v-for="(item,index) in iconList" :key="index" :bindtap="item.bindtap">
				<view :class="['cuIcon-'+item.icon,'text-'+item.color,'text-shadow']" style="font-size: 56rpx;">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?"99+":item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="margin-top-sm padding-lr-xs">
			<view class="bg-white light radius-lg shadow-blur">
				<view class="flex padding-tb-sm padding-lr-sm justify-between">
					<view class="padding-xs">
						<view class="text-xl text-black">惊喜连连·洁净一秋</view>
						<view class="padding-top-xs">家居清洗限时<text class="text-red text-bold"> 6.6折 </text><text
								class="cuIcon-roundrightfill text-red"></text></view>
					</view>
					<view class="">
						<view class="cu-btn round bg-gradual-pinknew margin-top-sm">6折优惠</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他功能 -->
		<view class="cu-bar margin-lr-xs margin-top grid col-4 no-border bg-white radius-lg-top">
			<view class="action">
				<text class="text-xl">其他功能</text>
			</view>
		</view>
		<view class="cu-list lilist grid col-4 no-border text-black margin-lr-sm padding-bottom radius-lg-bottom">
			<view class="cu-item" v-for="(item,index) in iconOtherList" :key="index" :bindtap="item.bindtap">
				<view :class="['cuIcon-'+item.icon,'text-'+item.color,'text-shadow']" style="font-size: 56rpx;">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?"99+":item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo
	} from '../../api/user'
	export default {
		data() {
			return {
				userinfo: {},
				iconList: [{
					icon: 'moneybagfill',
					color: 'blue',
					badge: 0,
					name: '待接单'
				}, {
					icon: 'presentfill',
					color: 'red',
					badge: 0,
					name: '待上门',
					bindtap: "bindZan"
				}, {
					icon: 'formfill',
					color: 'purple',
					badge: 11,
					name: '待评价',
					bindtap: "showResource"
				}, {
					icon: 'shopfill',
					color: 'green',
					badge: 0,
					name: '返修/售后',
					bindtap: "bindPoint"
				}],
				iconOtherList: [{
					icon: 'location',
					color: 'blue',
					badge: 0,
					name: '地址管理'
				}, {
					icon: 'service',
					color: 'blue',
					badge: 0,
					name: '电话客服',
					bindtap: "bindZan"
				}, {
					icon: 'mark',
					color: 'blue',
					badge: 0,
					name: '在线客服',
					bindtap: "showResource"
				}, {
					icon: 'mail',
					color: 'blue',
					badge: 0,
					name: '投诉',
					bindtap: "bindCollect"
				}, {
					icon: 'settings',
					color: 'blue',
					badge: 0,
					name: '设置',
					bindtap: "bindZan"
				}]
			}
		},
		created() {
			let token = uni.getStorageSync("token");
			if (token) {

			} else {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		},
		methods: {
			editUser(){
				uni.navigateTo({
					url:"./edit/edit"
				})
			},
			async init() {
				let res = await userInfo();
				console.log(res);
				let user = res.data.user;
				this.userinfo = {
					username: user.userName,
					balance: user.balance,
					img: user.avatar ? "http://124.93.196.45:10001/prod-api" + user.avatar :
						'../../static/tuoxiang.jpg'
				}
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style>
	.uni-page-wrapper {
		height: 100%;
	}

	.lilist {
		padding: 0;
		margin: 0 10rpx;
		margin-bottom: 10px;
	}

	.cu-avatar {
		overflow: hidden;
	}

	.cu-avatar image {
		width: 100%;
		height: 100%;
	}
</style>